<template>
	<view>
		<view class="uni-header">
			<view class="uni-group hide-on-phone">
				<!-- <view class="uni-title"> 标题 </view> -->
			</view>
			<view class="uni-group">
				<!-- 输入框 -->
				<input class="uni-search" type="text" v-model="searchVal" @confirm="search"
					:placeholder="$t('common.placeholder.query')" />
				<!-- 搜索按钮 -->
				<button class="uni-button" type="default" size="mini"
					@click="search">{{$t('common.button.search')}}</button>
				<!-- 添加按钮 -->
				<button class="uni-button" type="primary" size="mini">{{$t('common.button.add')}}</button>
				<!-- 批量删除按钮 -->
				<button class="uni-button" type="warn" size="mini"
					@click="delTable">{{$t('common.button.batchDelete')}}</button>
			</view>
		</view>
		<view class="uni-container">
			<!-- 表格组件 -->
			<uni-table :loading="loading" border stripe type="selection" :emptyText="$t('common.empty')"
				@selection-change="selectionChange">
				<uni-tr>
					<!-- 表头列 -->
					<uni-th width="150" align="center">序号</uni-th>
					<uni-th width="150" align="center">一级分类</uni-th>
					<uni-th align="center">二级分类</uni-th>
					<uni-th align="center">题目</uni-th>
					<uni-th align="center">作者</uni-th>
					<uni-th width="204" align="center">设置</uni-th>
				</uni-tr>
				<uni-tr v-for="(item ,index) in tableData" :key="index">
					<!-- 表格数据列 -->
					<uni-td>{{index + 1}}</uni-td>
					<uni-td>
						<view class="name">{{item.text}}</view>
					</uni-td>
					<uni-td>{{item.name}}</uni-td>
					<uni-td>{{item.question}}</uni-td>
					<uni-td>{{item.author}}</uni-td>
					<uni-td>
						<view class="uni-group">
							<!-- 编辑按钮 -->
							<button class="uni-button" size="mini" type="primary">{{$t('common.button.edit')}}</button>
							<!-- 删除按钮 -->
							<!--  @click="removeItem" 绑定点击行为  -->
							<button @click="removeItem(item._id,index)" class="uni-button" size="mini" type="warn">{{$t('common.button.delete')}}</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box">
				<!-- 分页组件 -->
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
					@change="change" />
			</view>
		</view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</view>
</template>


<script>
	// 获取云数据库题目集合引用
	import {
		topics
	} from "@/common/db/index.js"
	
	
	// 获取云数据库
	const db = uniCloud.database();

	// 选项式开发
	// 导出默认模块
	export default {
		// 自定义属性接收父组件的传参
		// props: {
		// 	arr: {
		// 		type: Array
		// 	}
		// },
		// 数据属性
		data() {
			return {
				// 搜索值
				searchVal: '',
				// 表格数据
				tableData: [],
				// 每页数据量
				pageSize: 5,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				// 加载状态
				loading: false
			}
		},

		// 组件中的生命周期是
		beforeMount() {
			// 初始化
			// this.listTopic();
			
			this.selectedIndexs = [];
			// 	// 获取第一页数据
			this.getData(1);
		},



		// 方法
		methods: {
			// 获取题目列表
			async listTopic() {
				// console.log("test")
				await topics.get().then(res => {
					console.log(res);
					// 获取查询结果
					let result = res.result;
					// 赋值
					this.tableData = result.data;

				}).catch(err => console.log(err))
			},



			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},

			// 多选事件处理函数
			selectionChange(e) {
				this.selectedIndexs = e.detail.index
			},

			// 批量删除函数
			delTable() {
				// console.log("批量删除")
				this.selectedItems();
			},
			// 编写删除逻辑
			async remove(id,index){
				await topics.where({_id: id}).remove().then(res=>{
					uni.showToast({
						title:"删除成功",
						icon:"none"
					})
					// 删除一项数据
					this.tableData.splice(index,1)
				}).catch(err=>console.log(err))
			},
			// 单项删除
			removeItem(id,index){
				let that = this;
				// console.log("单项删除")
				uni.showModal({
					title:"警告",
					content:"你要删除这一项记录吗?",
					success(res){
						// console.log(res.confirm)
						if(res.confirm){
							that.remove(id,index)
						}
					}
				})
			},

			// 分页触发事件处理函数
			change(e) {
				this.getData(e.current)
			},

			// 搜索函数
			search() {
				this.getData(1, 5, this.searchVal)
			},
			

			// 获取数据函数
			async getData(pageCurrent,  pageSizeValue, keyword = "") {
				this.loading = true
				// this.pageCurrent = pageCurrent
				const pageSize = pageSizeValue || 5; // 每页显示条数，默认为10
				const skip = (pageCurrent - 1) * pageSize; // 计算跳过的记录数
				
				const regex = new RegExp(keyword, 'i'); // 'i'表示不区分大小写
				
				// 使用云数据库
				await topics
				.where({question: regex})// 条件查询（关键字查询）
				.skip(skip) // 跳过指定数量的文档
				.limit(pageSize) // 限制返回文档的数量
				.get()
				.then(res => {
					// console.log(res);
					// 获取查询结果
					let result = res.result;
					// 赋值
					this.tableData = result.data.reverse();
					
					this.loading = false;
				
				}).catch(err => console.log(err))
				
				
				// this.total = res.total  这张表总数量多少?
				await topics.count().then(res=> {
					// console.log("总:",res);
					let result = res.result;
					this.total = result.total;//总数量
				}).catch(err => console.log(err))
				
			},

			
		}
	}
</script>


<style>
	/* #ifndef H5 */
	page {
		padding-top: 85px;
	}

	/* #endif */
</style>